<template>
	<view class="page">
		<view class="popup">
			<u-popup :show="show" mode="center" @close="close" @open="open">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="status_bar"></view>
					<view class="content">
						<view class="h-title">
							<view class="titleLeft">
								<view class="line"></view>
								<text>{{ $t('pages.quality.defects') }}:</text>
							</view>
							<view class="btns" v-if="!img">
								<uni-icons @click="resetCollections" type="refresh-filled" :size="60" color="#1890ff"></uni-icons>
								<uni-icons @click="delItem" type="minus-filled" :size="60" color="#1890ff"></uni-icons>
								<uni-icons @click="addNewItem" type="plus-filled" :size="60" color="#1890ff"></uni-icons>
							</view>
						</view>
						<defectiveModal 
							:callback="dataChange"
							v-if="img" 
							:treeData="treeData"
							:modalData="modalData"
							:modalDefective="modalDefective"
							:image="image"
						></defectiveModal>
						<view class="contentBox"  v-if="!img">
							<view class="editItem" v-for="(item, idx) in data" :key="item.id">
								<uni-data-picker 
									ref="defective"
									:localdata="treeData" 
									popup-title="请选择瑕疵" 
									v-model="item.label"
									@change="e => onchange(e, idx)"
									style="font-size: 20px;"
									:map="{text: 'defectiveSpot', value: 'id'}"
									
								></uni-data-picker>
								<uni-number-box 
									:min="0" 
									:max="999"
									:value="item.value"
									class="itemNumber"
									color="#fff"
									background="#1890ff"
									@change="(e) => valueChange(e, idx)" 
								/>
								<image 
									v-if="!item.isCollect && item.label"
									style="
										margin-left: 12px;
										width: 24px; 
										height: 24px; 
									" 
									:src="topIcon"
									@click="() => addCollection(idx)"
								></image>
								<image 
									v-if="item.isCollect && item.label"
									style="
										margin-left: 12px;
										width: 24px; 
										height: 24px; 
									" 
									:src="topActiveIcon"
									@click="() => removeCollection(idx)"
								></image>
								<view v-if="!item.label" style="margin-left: 12px;width: 24px;"></view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="footer">
					<view class="handle">
						<u-button @click="backTo">{{ $t('common.return') }}</u-button>
						<u-button type="primary" @click="confirmHadle">{{ $t('common.determine') }}</u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
  import topIcon from '../../../static/img/public/top.png' 
  import topActiveIcon from '../../../static/img/public/topActive.png' 
	import defectiveModal from "./defectiveModal.vue"
	export default {
		components: {
			defectiveModal
		},
		props: {
			submitSuccess: Function,
			defectInfo: {
				type: Array,
				default: () => []
			},
			image: String
		},
		data() {
			return {
				value: [],
				show: false,
				treeData: [],
				data: [],
				init: true,
				topIcon,
				topActiveIcon,
				collections: [],
				img: true,
				modalData: [],
				modalDefective: []
			};
		},
		onShow() {},
		mounted() {},
		methods: {
			close() {
				this.show = false
			},
			dataChange(mData, dData) {
				this.modalData = [...mData]
				this.modalDefective = [...dData]
			},
			open() {
				this.show = true
				if (this.init && !this.img) {
					this.init = false
					const collections = uni.getStorageSync("defectCollection") || []
					this.collections = collections
					this.data = [...this.data, ...collections]
					if (!this.data.length) {
						this.data.push({
							label: undefined,
							value: 1
						})
						this.$nextTick(() => {
							this.$refs[`defective`][this.data.length - 1].show()
						})
					}
				}
			},
			backTo() {
				this.show = false
			},
			confirmHadle() {
				let target = []
				if (this.modalDefective && this.img) {
					const targetArr = [...this.modalDefective]
					
					target = targetArr.filter(item => {
						item.defectiveSpot = item.text
						item.id = item.label
						item.questionNum = item.value
						return item.value > 0 && item.label
					})
				}
				if (!this.img) {
					target = this.data.filter(item => {
						item.defectiveSpot = item.text
						item.id = item.label
						item.questionNum = item.value
						return item.value > 0 && item.label
					})
				}

				this.$emit('submitSuccess', target, this.modalDefective)
				this.show = false
			},
			onchange(e, idx) {
        const value = e.detail.value
				if (value.length) {
					const existArr = this.data.filter(item => item.label === value[value.length - 1].value)
					if (existArr.length > 1) {
						this.$nextTick(() => {
							uni.showToast({
								icon: 'error',
								title: '已有相同瑕疵',
								duration: 1000
							})
							this.data[idx].label = undefined
						})
						return
					}
					this.data[idx].text = value?.[value.length - 1]?.text
				}

				if (!value.length) {
					this.removeCollection(idx)
				}
      },
			valueChange(val, idx) {
				this.data[idx].value = val
			},
			addNewItem() {
				this.data.push({
					label: undefined,
					value: 1
				})

				this.$nextTick(() => {
					this.$refs[`defective`][this.data.length - 1].show()
				})
			},
			delItem() {
				if (this.data.length > this.collections.length) {
					for (let i = this.data.length - 1; i >= 0; i--) {
						if (!this.data[i].isCollect) {
							this.data.splice(i, 1)
							return
						}
					}
				}
			},
			addCollection(idx) {
				const target = this.data[idx]
				target.isCollect = true
				const collections = uni.getStorageSync("defectCollection") || []
				const exist = collections.some(collection => collection.label === target.label)
				if (!exist) {
					collections.push({
						...target,
						value: 0
					})
					this.collections = collections
				}
				this.data = [...this.data]
				uni.setStorageSync("defectCollection", collections)
			},
			removeCollection(idx) {
				const target = this.data[idx]
				target.isCollect = false
				let collections = uni.getStorageSync("defectCollection") || []
				collections = collections.filter(collection => collection.text !== target.text)
				this.collections = collections
				this.data = [...this.data]
				uni.setStorageSync("defectCollection", collections)
			},
			resetCollections() {
				this.data.forEach(item => {
					item.isCollect = false
				})
				this.data = [...this.data]
				this.collections = []
				uni.setStorageSync("defectCollection", [])
			},
			initData() {
				this.init = true
				this.data = []
				this.modalData = []
				this.modalDefective = []
			}
		},
		watch: {
			defectInfo: {
				handler(nVal) {
					this.treeData = nVal
				},
				deep: true
			},
			image: {
				handler(nVal) {
					if(nVal) {
						this.img = true
					} else {
						this.img = false
					}
				},
				deep: true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #3E8FF7;
	}
	.popup {
		.scroll-Y {
			height: 95%;
			// padding-bottom: 5%;
			background-color: #fff;
		}
		/deep/ .u-popup__content {
			width: 100%;
			height: 100%;
			padding-bottom: 5%;
		}
		.content {
			width: 100%;
			height: 80%;
			background-color: #FFFFFF;
			.h-title {
				padding: 0 16px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				// margin-top: 2%;

				.titleLeft {
					width: 30%;
					display: inline-flex;
				}
				
				.line {
					background-color: #3E8FF7;
					width: 9.381rpx;
					height: 37.523rpx;
					margin-top: 13.133rpx;
					margin-right: 9.381rpx;
					margin-left: 9.381rpx;
				}
				text {
					font-size: 1.2rem;
				}
			}
			.list-info {
				display: flex;
				flex-wrap: wrap;
				align-content: flex-start;
				margin-left: 1%;
				height: 100%;
				width: 100%;
				.item {
					width: 30%;
					min-height: 10%;
					display: flex;
					// justify-content: space-between;
					margin-top: 2%;
					margin-right: 2%;
					.proName {
						min-width: 50%;
						color: #585858;
						display: flex;
						align-items: center;
					}
					.number {
						min-width: 20%;
						height: 100%;
						margin-right: 5%;
						background-color: #FFFFFF;
						.u-number-box {
							width: 100%;
							height: 100%;
						}
						.dis-none {
							display: none;
						}
						.dis-block {
							display: flex;
						}
						.minus {
							width: 75.047rpx;
							height: 75.047rpx;
							border-radius: 4px;
							opacity: 1;
							box-sizing: border-box;
							border: 2px solid #3E8FF7;
							font-size: 1.2rem;
							font-weight: bold;
							color: #3E8FF7;
						}
						.plus {
							width: 75.047rpx;
							height:75.047rpx;
							padding-bottom: 7.505rpx;
							border-radius: 4px;
							opacity: 1;
							box-sizing: border-box;
							border: 2px solid #3E8FF7;
							font-size: 2.5rem;
							font-weight: 100;
							color: #3E8FF7;
						}
						.input {
							width: 100%;
							height: 100%;
							border-radius: 7.505rpx;
							border: 1px solid #DDDDDD;
							margin: 0 4%;
							font-size: 1.5rem;
							background-color: #FFFFFF;
							/deep/ .u-input__content__field-wrapper__field {
								height: 100%;
								font-size: 1rem!important;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}


	.footer {
		position: fixed;
		width: 100%;
		min-height: 10%;
		display: flex;
		align-items: center;
		background-color: #fff;
		box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.3);
		bottom: 0;
		right: 0;

		.handle {
			width: 100%;
			height: 100%;
			display: flex;
			position: absolute;
			button {
				width: 100%;
				height: 100%;
				font-size: 2rem;
				// letter-spacing: 56.285rpx;
			}
		}
	}

.contentBox {
	width: 100%;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 40px;
	grid-gap: 16px;
	padding: 16px;
}
.editItem {
	display: flex;
	align-items: center;
}
.itemNumber {
	margin-left: 8px;
	// height: 32px;
}

.btns {
	display: flex;
	gap: 16px;
}

.addFlaw {
	// width: 120px;
	margin-top: 12px;
	// padding: 8px 12px;
	background: #1890ff;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.delFlaw {
	// width: 136px;
	margin-top: 12px;
	// padding: 8px 12px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #1890ff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1890ff;
}
</style>
